<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>grid</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
	<script type="text/javascript" src="../js/ext-base.js"></script>
	<script type="text/javascript" src="../js/ext-all-debug.js"></script>
	<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
        <script type="text/javascript">
Ext.onReady(function(){

    var ds1 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy([
            ['01','name01','descn01'],
            ['02','name02','descn02'],
            ['03','name03','descn03'],
            ['04','name04','descn04'],
            ['05','name05','descn05']
        ]),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    var ds2 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy([
            ['11','name11','descn11'],
            ['12','name12','descn12'],
            ['13','name13','descn13'],
            ['14','name14','descn14'],
            ['15','name15','descn15']
        ]),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });

    ds1.load();
    ds2.load();

    var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);

    var grid1 = new Ext.grid.GridPanel({
        el: 'grid1',
        ds: ds1,
        cm: cm,
        enableDragDrop: true
    });
    var grid2 = new Ext.grid.GridPanel({
        el: 'grid2',
        ds: ds2,
        cm: cm,
        enableDragDrop: true
    });

    grid1.render();
    grid2.render();

    var ddrow1 = new Ext.dd.DropTarget(grid1.view.mainBody, {
        ddGroup : 'GridDD',
        copy    : false,
        notifyDrop : function(dd, e, data) {
            // 选中了多少行
            var rows = data.selections;
            // 拖动到第几行
            var index = dd.getDragData(e).rowIndex;
            if (typeof(index) == "undefined") {
                index = 0;
            }
            // 修改ds
            for(i = 0; i < rows.length; i++) {
                var rowData = rows[i];
                if(!this.copy) ds2.remove(rowData);
                ds1.insert(index, rowData);
            }
        }
    });

    var ddrow2 = new Ext.dd.DropTarget(grid2.view.mainBody, {
        ddGroup : 'GridDD',
        copy    : false,
        notifyDrop : function(dd, e, data) {
            // 选中了多少行
            var rows = data.selections;
            // 拖动到第几行
            var index = dd.getDragData(e).rowIndex;
            if (typeof(index) == "undefined") {
                index = 0;
            }
            // 修改ds
            for(i = 0; i < rows.length; i++) {
                var rowData = rows[i];
                if(!this.copy) ds1.remove(rowData);
                ds2.insert(index, rowData);
            }
        }
    });

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../examples.js"></script>
        <div id="grid1" style="margin:20px; float:left; width:350px; height:300px;"></div>
        <div id="grid2" style="margin:20px; float:left; width:350px; height:300px;"></div>
    </body>
</html>
